<!-- 忘记密码 -->
<template>
    <div class="forget">
        <div class="header">
            <img @click="tologin" src="../../assets/logo/logo.png" style="cursor: pointer;" />
            <p>奢批数字供应链系统</p>
        </div>
        <el-button type="primary" icon="el-icon-back" style="margin: 50px 0 0 50px;" @click="tologin()">返回</el-button>
        <div class="conter">
            <p>忘记密码</p>
            <el-form class="" style="margin-top: 60px;" el-form ref="forget" :model="forget" :rules="loginRule">
                <el-form-item class="input" prop="num"><el-input class="input" v-model="forget.num" placeholder="请输入手机号/邮箱"></el-input></el-form-item>
                <el-form-item class="input" prop="code" style="margin-top: 20px;position: relative;">
                    <el-input v-model.trim="forget.code" required placeholder="输入验证码" maxlength="6" />
                    <p href="" v-if="isShow == true" class="hqyzm" @click="getCodePhone(), (count = 60)">
                        获取验证码
                    </p>
                    <el-button v-if="isShow == false" class="hqyzm" style="margin: 3px 0 0 0;">{{ count }}s</el-button>
                </el-form-item>
                <el-form-item class="input" prop="userpwd1"><el-input type="password" class="input" v-model="forget.userpwd1" placeholder="新密码"></el-input></el-form-item>
                <el-form-item class="input" prop="userpwd2"><el-input type="password" class="input" v-model="forget.userpwd2" placeholder="确认新密码"></el-input></el-form-item>
            </el-form>
            <div class="btns">
                <el-button type="primary" @click="submitbtn('forget')">提交</el-button>
                <el-button type="info" @click="empty">重置</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getCodeImg, getCode, phoneSignIn, emailSignIn, ForgetPsd } from '@/api/login';
import { addUser, registermails, getEmail, uniquephone } from '@/api/biz/userRegister';
export default {
    name: 'forget',
    data() {
        // 手机/邮箱验证
        var checkNum = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('手机号/邮箱不能为空'));
            } else {
                let isnum = /^\d+$/.test(value);
                if (isnum == true) {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                    if (reg.test(value)) {
                        this.numtype = 1;
                        this.phonenumber = value;
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                } else {
                    let reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                    let isok = reg.test(value);
                    this.numtype = 2;
                    this.email = value;
                    if (!isok) {
                        return callback(new Error('邮箱格式不正确，请重新输入'));
                    }
                }
            }
        };
        // 密码一致验证
        var pwd = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.forget.userpwd1) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            loginRule: {
                num: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '手机号不能为空'
                    },
                    { validator: checkNum, trigger: 'blur' }
                ],
                code: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '验证码不能为空'
                    },
                    {
                        pattern: /^[A-Za-z0-9u4e00-u9fa5]+$/,
                        message: '不允许输入空格等特殊符号'
                    }
                ],
                userpwd1: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '设置新密码不能为空'
                    },
                    {
                        required: true,
                        trigger: 'blur',
                        min: 6,
                        max: 20,
                        message: '密码需长度在 6 到 20 个字符之间'
                    },
                    {
                        pattern: /^[A-Za-z0-9u4e00-u9fa5]+$/,
                        message: '不允许输入空格等特殊符号'
                    }
                ],
                userpwd2: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '确认新密码不能为空'
                    },
                    {
                        required: true,
                        trigger: 'blur',
                        min: 6,
                        max: 20,
                        message: '新密码需长度在 6 到 20 个字符之间'
                    },
                    {
                        pattern: /^[A-Za-z0-9u4e00-u9fa5]+$/,
                        message: '不允许输入空格等特殊符号'
                    },
                    { validator: pwd, trigger: 'blur' }
                ]
            },
            forget: {
                num: '',
                code: '',
                userpwd1: '',
                userpwd2: ''
            },
            phonenumber: '',
            email: '',
            numtype: 1,
            isShow: true,
            count: '',
            timer: null
        };
    },
    methods: {
        // 修改密码
        submitbtn() {
            if (this.forget.num != '' && this.forget.code != '' && this.forget.userpwd1 != '') {
                let datas = {};
                if (this.numtype == 1) {
                    datas = {
                        phonenumber: this.phonenumber,
                        phoneCode: this.forget.code,
                        password: this.forget.userpwd1
                    };
                }
                if (this.numtype == '2') {
                    datas = {
                        email: this.email,
                        phoneCode: this.forget.code,
                        password: this.forget.userpwd1
                    };
                }
                ForgetPsd(datas).then(res => {
                    if (res.code === 200) {
                        this.msgSuccess('修改成功');
                        this.tologin();
                    } else {
                        this.msgError(res.msg);
                    }
                    // this.$router.push({ path: this.redirect || '/' });
                });
            }
        },
        // 获取验证码(手机号-注册)
        getCodePhone() {
            if (this.phonenumber.length == 11) {
                if (this.phonenumberphonenumber != '' || this.email != '') {
                    this.isShow = false;
                    const TIME_COUNT = 60;
                    if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.isShow = false;
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
                                this.count--;
                            } else {
                                this.isShow = true;
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                        }, 1000);
                    }
                    if (this.numtype == 1) {
                        let datas = {
                            phonenumber: this.phonenumber
                        };
                        uniquephone(datas).then(res => {
                            if (res.msg == 0) {
                                this.reqcode();
                            } else {
                                this.msgError('账号不存在');
                            }
                        });
                    }
                }
            }

            if (this.numtype == 2) {
                let datas = {
                    email: this.email
                };
                getEmail(datas).then(res => {
                    console.log(res);
                });
            }
        },
        // 返回首页
        tologin() {
            this.$emit('displays');
        },
        // 重置
        empty() {
            (this.forget.num = ''), (this.forget.code = ''), (this.forget.userpwd1 = ''), (this.forget.userpwd2 = ''), (this.phonenumber = ''), (this.email = '');
        },
        reqcode() {
            let datas = {
                phone: this.phonenumber
            };
            getCode(datas).then(res => {
                if (res.code == 200) {
                    this.msgSuccess('验证码已发送');
                }
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.forget {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    .header {
        width: 100%;
        height: 80px;
        border-bottom: 1px solid #333;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
}
.header img {
    width: 60px;
    height: 60px;
    margin: 10px 0 0 40px;
    float: left;
}
.header p {
    float: left;
    height: 80px;
    line-height: 80px;
    font-size: 26px;
    margin-left: 20px;
}
.forget .conter {
    width: 80%;
    padding: 10vh 20%;
    margin: 0 auto;
    font-size: 26px;
}
.forget .conter .input {
    width: 100%;
}
.forget .conter input {
    border-radius: 10px !important;
}
.btns {
    margin: 70px 0 0 0px;
}
.hqyzm {
    font-size: 1.375rem;
    color: #3893f3;
    float: left;
    position: absolute;
    top: 7px;
    right: 20px;
    background: transparent;
    border: 0;
    cursor: pointer;
}
</style>
